<template>
  <div class="search">
    <div class="container">
      <div class="screen">
        <span>当前筛选：</span>
        <ul class="list-box">
          <li v-if="brandList.brandId && brandList.brandId.length > 0" class="product">
            品牌：{{ brandList.text }}
            <i class="iconfont icon-close-btn close-btn" @click="closeNape(1)" />
          </li>
          <li v-if="urlData.skuNumFlag === 'Y'" class="product">
            服务：仅看库存充足
            <i class="iconfont icon-close-btn close-btn" @click="closeNape(2)" />
          </li>
        </ul>
        <span v-if="(brandList.brandId && brandList.brandId.length > 0 )|| urlData.skuNumFlag === 'Y'" class="eliminate" @click="closeNape(0)">清除全部</span>
      </div>
      <search-box ref="searchBox" :brand-list="brandList" :url-data="urlData" @refreshCondition="refreshCondition" />
      <div class="tab-list">
        <div class="complete" :class="{active:urlData.sortType ===0}" @click="changeType(0)">全部</div>
        <div class="price" :class="{active:urlData.sortType ===2}" @click="changeType(2)">
          <span>价格</span>
          <div class="arrows">
            <i v-show="up" class="iconfont icon-up-arrows up-btn" :class="{'btn-active':(urlData.sortType ===2 && urlData.sortMethod == 'asc')}" />
            <i v-show="below" class="iconfont icon-below-arrows below-btn" :class="{'btn-active':(urlData.sortType ===2 && urlData.sortMethod == 'desc')}" />
          </div>
        </div>
        <div v-if="showSortAll && $refs.productList.productList.length > 0" class="optimal" @click="sortAll()">
          <span>对当前页按总计最优排序</span>
        </div>
      </div>
      <search-product-list ref="productList" :brand-list="brandList" :condition="urlData" :show-sort-all.sync="showSortAll" @refreshCondition="refreshCondition" @recordCondition="recordCondition" />
    </div>
  </div>
</template>

<script>

import { toProductList } from '@/js/product'
import SearchBox from './newConseComponent/SearchBox'
import SearchProductList from './newConseComponent/SearchProductList'
import { Base64 } from 'js-base64'
import { recordSearch } from '@/api/record/index'
import { getUserInfo, loginCheck } from '@/api/common'
export default {
  components: {
    SearchBox,
    SearchProductList
  },
  data() {
    return {
      // url参数
      urlData: {},
      // 是否显示总计排序按钮 false 按钮不显示（运费没加载完，或已经排序过） true 运费加载完
      showSortAll: false,
      brandList: {
        text: '',
        brandId: []
      },
      up: true,
      below: false
    }
  },
  created() {
    try {
      this.urlData = JSON.parse(Base64.decode(this.$route.params.data))
      this.urlData.searchRange = this.urlData.searchRange > 300 ? 300 : this.urlData.searchRange
      this.urlData.buyNum = this.urlData.buyNum ? this.urlData.buyNum : 1
      if (!this.urlData) {
        this.urlData = {}
      }
    } catch (e) {
      this.urlData = {}
    }
  },
  methods: {
    // 关闭筛选项按钮
    closeNape(type) {
      if (type === 0) {
        // 清除所有
        let flag = false
        if (this.urlData.brandId && this.urlData.brandId.length > 0) {
          flag = true
        }
        this.$delete(this.urlData, 'brandId')
        this.$delete(this.urlData, 'skuNumFlag')
        if (this.$refs.searchBox && this.$refs.searchBox.$refs.brandList) {
          this.$refs.searchBox.$refs.brandList.resetBrand()
        }
        if (flag) {
          this.refreshCondition(1)
        }
      } else if (type === 1) {
        // 清除品牌
        this.$delete(this.urlData, 'brandId')
        if (this.$refs.searchBox && this.$refs.searchBox.$refs.brandList) {
          this.$refs.searchBox.$refs.brandList.resetBrand()
        }
        this.refreshCondition(1)
      } else if (type === 2) {
        // 清除服务
        this.$delete(this.urlData, 'skuNumFlag')
        this.refreshCondition(2)
      }
    },
    // 条件变更，更新状态 type == 1 为改变品牌
    // 条件变更，更新状态 type == 2 为改变服务
    // 条件变更，更新状态 type == 3 为改变排序方式
    refreshCondition(type) {
      if (type !== 1) {
        if (this.$refs.searchBox && this.$refs.searchBox.$refs.brandList) {
          this.$refs.searchBox.$refs.brandList.getData()
        }
        this.brandList.brandId = []
      }
      if (type !== 2 || type !== 3) {
        // 记录
        this.recordCondition(true)
      }
      if (type !== 1 || type !== 2 || type !== 3) {
        toProductList(this, this.urlData, true)
      }
      this.$refs.productList.listSpu()
    },
    // 切换排序方式
    changeType(type) {
      if (type === 0) {
        // 全部
        this.urlData.sortType = 0
      } else if (type === 2) {
        // 价格
        this.urlData.sortType = 2
        if (!this.urlData.sortMethod) {
          this.urlData.sortMethod = 'asc'
        } else
        if (this.urlData.sortMethod === 'asc') {
          this.up = true
          this.below = false
          this.urlData.sortMethod = 'desc'
        } else {
          this.up = false
          this.below = true
          this.urlData.sortMethod = 'asc'
        }
      }
      this.refreshCondition(3)
    },
    // 总计最优排序
    sortAll() {
      if (this.showSortAll) {
        this.showSortAll = false
        this.$refs.productList.sortAll()
      }
    },
    // 记录
    recordCondition(flag) {
      const brandId = this.brandList.brandId
      const { address, buyNum, proaId, probId, procId, prodId, proeId, childCategory, mainCategory, info } = this.urlData
      const { receiveProvince, receiveCity, receiveDistrict, receiveAddress } = address
      const { categoryUnit, standardProa, standardProb, standardProc, standardProd, standardProe } = childCategory
      const { proa, prob, proc, prod, proe } = info
      const addressTemp = `${receiveProvince}${receiveCity}${receiveDistrict}${receiveAddress}`
      const params = {
        mainCategoryId: mainCategory.id,
        mainCategoryName: mainCategory.categoryName,
        childCategoryId: childCategory.id,
        childCategoryName: childCategory.categoryName,
        aId: proaId,
        bId: probId,
        cId: procId,
        dId: prodId,
        eId: proeId,
        propertyA: standardProa,
        propertyB: standardProb,
        propertyC: standardProc,
        propertyD: standardProd,
        propertyE: standardProe,
        valueA: proa,
        valueB: prob,
        valueC: proc,
        valueD: prod,
        valueE: proe,
        buyNum,
        unit: categoryUnit,
        address: addressTemp
      }
      if (flag && brandId && brandId.length) {
        const brandList = this.$refs.searchBox.$refs.brandList.brandList
        const set = new Set()
        brandId.forEach(i => {
          brandList.forEach(j => {
            if (j.id.indexOf(i) > -1) {
              set.add(j.chineseName)
            }
          })
        })
        if (set.size) {
          params.brandName = [...set].join()
        }
      }
      Object.keys(params).forEach(field => {
        if (!params[field]) {
          delete params[field]
        }
      })
      loginCheck().then(res => {
        if (res.data) {
          getUserInfo().then(response => {
            recordSearch(Object.assign(params, { onlyAccount: response.data.onlyAccount }))
          })
        } else {
          recordSearch(Object.assign(params, { onlyAccount: '游客' }))
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped >
  .search {
    background: #f5f5f5;
    .container {
      .screen{
        display: flex;
        font-size: 10px;
        align-items: center;
        height: 28px;
        line-height: 28px;
        color: #A7A7AA;
        .list-box{
          display: flex;
          align-items: center;
          .product{
            line-height: 17px;
            padding: 0 6px;
            background: #ffffff;
            height: 17px;
            margin-right: 10px;
            .close-btn{
              cursor: pointer;
              font-size: 14px;
            }
          }
        }
        .eliminate{
          cursor: pointer;
        }

      }
      .tab-list {
        height: 44px;
        margin-bottom: 24px;
        background: #ffffff;
        display: flex;
        line-height: 44px;
        padding-left: 20px;
        .active {
          border-bottom: 3px solid #ff3b30;
          height: 44px;
          color: #ff3b30;
        }
        .optimal{
          cursor: pointer;
        }
        .complete{
          cursor: pointer;
        }
        .price {
          cursor: pointer;
          margin: 0 12px;
          display: flex;
          .arrows{
            display: flex;
            flex-direction: column;
            .btn-active:before {
              color: #ff3b30;
            }
            .up-btn{
              font-size: 10px;
              height: 12px;
              margin-top: -4px;
              margin-left: 4px;
              color: #666666;
            }
            .below-btn{
              font-size: 10px;
              margin-left: 4px;
              color: #666666;
            }
          }
        }
      }
    }

    /deep/ .input-style {
      .el-input__inner {
        text-indent: 24px;
      }
    }
    //
    /deep/ .input {
      .el-input {
        height: 28px;
        width: 217px;
      }
    }
    /deep/ .range-style {
      width: 100px;
      .el-input__inner {
        width: 100px;
      }
    }
    /deep/ .search-box {
      .el-form-item {
        width: 350px;
      }
      .el-input__inner {
        height: 28px;
      }
      .el-input-number {
        height: 28px;
        line-height: 26px;
      }
    }
  }
</style>
